<template>
  <div class="l-tab-page l-home-page" >
    <el-row :gutter="8">
      <el-col :span="6">
        <div class="l-target-item">
          <div class="l-target-item-content" :style="`background-image: url(${rootUrl}img/home/target.png);`" >
            <div class="l-target-icon" >
              <i class="l-target-icon-i el-icon-document-copy" ></i>
            </div>
            <div class="l-target-des">
              <span class="l-target-des-num" >300</span>
              <span class="l-target-des-text">{{ $t('最新商机量') }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="l-target-item">
          <div class="l-target-item-content" :style="`background-image: url(${rootUrl}img/home/target.png);`" >
            <div class="l-target-icon" >
              <i class="l-target-icon-i el-icon-s-custom" ></i>
            </div>
            <div class="l-target-des">
              <span class="l-target-des-num" >100</span>
              <span class="l-target-des-text">{{ $t('最新客户量') }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="l-target-item">
          <div class="l-target-item-content" :style="`background-image: url(${rootUrl}img/home/target.png);`" >
            <div class="l-target-icon" >
              <i class="l-target-icon-i el-icon-tickets" ></i>
            </div>
            <div class="l-target-des">
              <span class="l-target-des-num" >200</span>
              <span class="l-target-des-text">{{ $t('新签订单量') }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="l-target-item">
          <div class="l-target-item-content" :style="`background-image: url(${rootUrl}img/home/target.png);`" >
            <div class="l-target-icon" >
              <i class="l-target-icon-i el-icon-money" ></i>
            </div>
            <div class="l-target-des">
              <span class="l-target-des-num" >3000000</span>
              <span class="l-target-des-text">{{ $t('销售额') }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="24">
        <div class="l-chart-item">
          <div class="l-chart-item-content" >
            <l-panel :title="$t('订单数据')" style="padding:0;" >
                <div id="chart1" class="l-rblock" ></div>
            </l-panel>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="12">
        <div class="l-list-item">
          <div class="l-list-item-content" >
            <l-panel :title="$t('新闻列表')" style="padding:0;" >
               <div class="l-rblock" style="padding:8px 24px;" >
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[新闻]') }}&nbsp;&nbsp;&nbsp;{{ $t('城方敏捷框架core-vue版本发布') }}</a>
                      <label class="lr-msg-line-label" >2020-11-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[新闻]') }}&nbsp;&nbsp;&nbsp;{{ $t('城方敏捷框架java版本发布') }}</a>
                      <label class="lr-msg-line-label" >2020-05-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[新闻]') }}&nbsp;&nbsp;&nbsp;{{ $t('城方敏捷框架最新更新') }}</a>
                      <label class="lr-msg-line-label" >2020-04-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[新闻]') }}&nbsp;&nbsp;&nbsp;{{ $t('城方集成新的报表插件') }}</a>
                      <label class="lr-msg-line-label" >2020-03-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[新闻]') }}&nbsp;&nbsp;&nbsp;{{ $t('城方成立新的研发团队') }}</a>
                      <label class="lr-msg-line-label" >2020-02-01</label>
                  </div>
               </div>
            </l-panel>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="l-list-item">
          <div class="l-list-item-content" >
            <l-panel :title="$t('通知公告')" style="padding:0;" >
               <div class="l-rblock" style="padding:8px 24px;" >
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[公告]') }}&nbsp;&nbsp;&nbsp;{{ $t('国庆节放假安排') }}</a>
                      <label class="lr-msg-line-label" >2020-06-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[通知]') }}&nbsp;&nbsp;&nbsp;{{ $t('苏州分公司总经理任命书') }}</a>
                      <label class="lr-msg-line-label" >2020-05-21</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[通知]') }}&nbsp;&nbsp;&nbsp;{{ $t('公司开票信息更新通知') }}</a>
                      <label class="lr-msg-line-label" >2020-04-21</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[公告]') }}&nbsp;&nbsp;&nbsp;{{ $t('全体员工体验通知') }}</a>
                      <label class="lr-msg-line-label" >2020-03-01</label>
                  </div>
                  <div class="lr-msg-line">
                      <a  class="lr-msg-line-a" href="#">{{ $t('[通知]') }}&nbsp;&nbsp;&nbsp;{{ $t('华东区营销总监任命书') }}</a>
                      <label class="lr-msg-line-label" >2020-02-01</label>
                  </div>
               </div>
            </l-panel>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "home",
  data () {
    return {
      echart:null,
      option:{
        color: ["#409EFF"],
        legend:{
          padding:0
        },
        grid: {
          left:64,
          right:48,
          top:48,
          bottom:48
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine:{
            show:false,
            lineStyle:{
              color:'#999'
            }
          },
        },
        yAxis: {
          axisLine:{
            show:false,
            lineStyle:{
              color:'transparent'
            }
          },
          axisLabel:{
            color:'#999'
          },
          splitLine:{
            lineStyle:{
              color:'#d7dae2'
            }
          },
          type: 'value'
        },
        series: [{
            data: [300, 932, 901, 934, 1290, 2000, 800],
            type: 'line',
            areaStyle: {
              color: "#ecf5ff" 
            },
            smooth: true
        }]
      }
    };
  },
  computed: {
     ...mapGetters(["screen"]),
  },
  watch: {
    screen() {
      this.resize();
    },
    lr_isCollapse() {
      this.resize();
    },
  },
  created () { 
  },
  mounted () {
    this.$nextTick(()=>{
      this.initChart();
    })
  },
  beforeDestroy(){
    this.echart.dispose();
  },
  methods: {
    initChart(){
      this.echart = window.echarts.init(document.getElementById('chart1'));
      this.echart.setOption(this.option);
    },
    resize(){
      this.$nextTick(()=>{
        setTimeout(()=>{
          this.echart.resize({});
        },300)
      })
    }
  }
};
</script>

<style lang="scss">
.l-home-page{
  padding:0 8px 8px 8px;
  .l-target-item,.l-chart-item,.l-list-item{
    position: relative;
    height: 152px;
    width: 100%;
    padding-top: 8px;
    box-sizing: border-box;

    &-content{
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      background-size: cover;
      background-position: 50%;
    }
  }
  .l-chart-item{
    height: 400px;
  }
  .l-list-item{
    height: 272px;
  }

  .l-target-item-content{
    padding:32px 24px;
  }
  .l-target-icon{
    display: flex;
    align-items:center;
    justify-content:center;
    width: 88px;
    height: 88px;
    text-align: center;
    
    border-radius: 50%;
    
    &-i{
      font-size: 32px;
    }
  }

  .el-col:nth-child(4n + 1) .l-target-icon-i{
    color: #67C23A;
  }
  .el-col:nth-child(4n + 2) .l-target-icon-i{
    color: #409EFF;
  }
  .el-col:nth-child(4n + 3) .l-target-icon-i{
    color: #E6A23C;
  }
  .el-col:nth-child(4n + 4) .l-target-icon-i{
    color: #F56C6C;
  }
    .el-col:nth-child(4n + 1) .l-target-icon{
    background-color : #e1f3d7;
  }
  .el-col:nth-child(4n + 2) .l-target-icon{
    background-color: #ecf5ff;
  }
  .el-col:nth-child(4n + 3) .l-target-icon{
    background-color: #faecd8;
  }
  .el-col:nth-child(4n + 4) .l-target-icon{
    background-color: #fde2e2;
  }

  .l-target-des{
    position: absolute;
    top:32px;
    left: 136px;
    &-num{
      display: block;
      font-size: 20px;
      font-weight: 600;
    }
    &-text{
      display: block;
      margin-top: 4px;
      font-size: 14px;
      color: #666;
    }
  }

  .lr-msg-line {
      position: relative;
      width: 100%;
      line-height: 39px;
      border-bottom: 1px solid #ccc;
      &-a {
        cursor: pointer;
        color: #333;
        font-size: 14px;
        text-decoration: none;
      }
      &-label {
          position: absolute;
          top: 0;
          right: 0;
          margin-bottom: 0;
          color: #333;
          font-size: 14px;
          font-weight: 400;
      }
  }

}
</style>
